import React, { Component } from "react"

class Child extends Component {
    state = {
        list: []
    }
    componentDidUpdate(prevProps) {
        console.log(prevProps, this.props)
        // 一直执行
        // fetch('http://121.89.205.189/api/pro/search?keyword=' + this.props.keyword)
        //     .then(res => res.json())
        //     .then(res => {
        //         console.log(res) // 一直执行
        //         this.setState({
        //             list: res.data
        //         })
        //     })

        // 依赖的数据发生改变才会继续重新执行
        if (prevProps.keyword !== this.props.keyword) {
            fetch('http://121.89.205.189/api/pro/search?keyword=' + this.props.keyword)
            .then(res => res.json())
            .then(res => {
                console.log(res) // 一直执行
                this.setState({
                    list: res.data
                })
            })
        }
    }
    componentDidMount () {
        console.log('111')
        fetch('http://121.89.205.189/api/pro/search?keyword=' + this.props.keyword)
          .then(res => res.json())
          .then(res => {
            this.setState({
              list: res.data
            })
          })
      }
    render () {
        const { list } = this.state
        return (
            <>
              {
                  list && list.map(item => (
                      <div key = { item.proid }>{ item.proid }</div>
                  ))
              }
            </>
        )
    }
}

class App extends Component {
    state = {
        keyword: '手机'
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.keyword}
                    onChange={(e) => {
                        this.setState({
                            keyword: e.target.value
                        })
                    }}
                /> {this.state.keyword}
                <Child keyword = { this.state.keyword }/>
            </div>
        )
    }
}

export default App